<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h2 class="Header" @click="toHome">
          <div class="Header-inner">
            <!-- <el-image style="width: 50px; height: 50px"
                      :src="`${publicPath}Q.png`" :fit="fill" /> -->
            <el-image style="width: 25px; height: 25px; margin-right: 5px;"
                      :src="`${publicPath}/icons/T_48x48.png`" :fit="fill" />
            <span>Mini Toolbox</span>
          </div>
        </h2>
      </el-header>
      <div v-if="$route.path && !['/home', '/login', '/'].includes($route.path)">
        <router-link to="/">
          <el-icon :size="40"
                   class="to-home-icon"
                   :color="'#409EFF'">
            <HomeFilled />
          </el-icon>
        </router-link>
      </div>
      <el-divider style="margin: 10px 0;"/>
      <div v-if="$route.path && !['/home', '/login', '/'].includes($route.path)"
           style="padding: 0 20px 0px">
        <el-text tag="b">{{$route.name}}</el-text><br>
        <el-text tag="p">{{$route.meta.desc}}</el-text>
      </div>
      <el-main v-loading="loading">
        <router-view/>
      </el-main>
      <el-footer style="padding: 10px 0; height: 30px;">
        <el-divider style="margin: 10px 0;">
          <el-text tag="i" size="small">Copyright © 2023 Info Tech</el-text>
        </el-divider>
      </el-footer>
    </el-container>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {toLogin, LoginForm } from "@/api";
export default defineComponent({
  data() {
    return {
      publicPath: process.env.BASE_URL,
      loading: false
    }
  },
  methods: {
    toHome() {
      this.$router.replace({
        path: '/'
      })
    },
    async autoLogin() {
      const params: any = {
        grant_type: 'password',
        scope: 'ui',
        client_id: 'quectel',
        client_secret: 'quectel',
        auth_type: 'rsa_area',
        ...(LoginForm())
      }
      this.loading = true
      const res = await toLogin(params)
      try {
        this.loading = false
        const data: any = res.data
        if(data.token_type && data.access_token) {
          localStorage.setItem('MINITOOLBOX_tk', `${data.token_type}${data.access_token}`)
          // setTimeout(() => {
          //   this.$router.replace({
          //     name: this.$route.name || ''
          //   })
          // })
        }
      } catch (e) {
        this.loading = false
        this.$router.push({ name: 'login' })
      }
    }
  },
  mounted() {
    this.autoLogin()
  },
  watch: {
    '$route': {
      handler(to) {
        if(to.name === 'PicBed') {
          console.log('--');
          
        } else {
          this.loading = false
        }
      },
      deep: true,
      immediate: true
    }
  }
})
</script>
<style lang="scss">
#app {
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif, "Microsoft YaHei";
  text-align: center;
  color: #2c3e50;
  //background-color: #f6f7f9;
  //background-color: #fff;
  min-width: 400px;
  min-height: 500px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.Header {
  line-height: 60px;
  &-inner {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Header-inner {
    cursor: pointer;
  }
}
.el-main {
  padding: 10px;
  height: 365px;
  overflow-x: hidden;
  overflow-y: auto;
}
.to-home-icon {
  color: #2c3e50;
  cursor: pointer;
  &:hover {
    color: #409EFF;
  }
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 6px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #C1C1C1
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.01);
  border-radius: 6px;
  background: rgba(238, 238, 238, 0.6)
}
</style>
